<template>
    <customDrawer v-model:show="visible" size="450px" :close-on-click-modal="false">
        <div>
            <div class="flex justify-between">
                <div class="text-lg">会员详情</div>
                <div class="pointer" @click="onCancle">
                    <el-icon size="24px">
                        <Close />
                    </el-icon>
                </div>
            </div>
            <div class="member-bg w-355px h-144px mt-20px mx-auto px-16px py-24px box-border">
                <div class="text-lg text-white font-bold">苏州华诺人力公司</div>
                <div class="text-op-70 text-white mt-8px text-sm">有效期：2023-08-22 至 2025-08-22</div>
                <div class="flex justify-between text-white mt-28px">
                    <div>
                        <div class="text-sm text-op-70 text-white">超管名称</div>
                        <div class="text-base font-bold mt-8px">苏雨辰</div>
                    </div>
                    <div>
                        <div class="text-sm text-op-70 text-white">手机号</div>
                        <div class="text-base font-bold mt-8px">13435435567</div>
                    </div>
                    <div>
                        <div class="text-sm text-op-70 text-white">所属商务</div>
                        <div class="text-base font-bold mt-8px">秦信峰</div>
                    </div>
                    <div>
                        <div class="text-sm text-op-70 text-white">已开通会员卡</div>
                        <div class="text-base font-bold mt-8px">子弹VIP</div>
                    </div>
                </div>
            </div>
            <div>
                <div class="text-lg mt-28px mb-16px">产品权益</div>
                <div class="border border-solid border-darkBorderColor rounded-8px p-16px mb-12px">
                    <div class="text-base mb-20px">保费抵扣券</div>
                    <div class="flex text-base">
                        <div class="flex-1">
                            <span class="text-gray mr-12px">保费余额</span>
                            <span>¥400</span>
                        </div>
                        <div class="flex-1">
                            <span class="text-gray mr-12px">已领取</span>
                            <span>3次</span>
                        </div>
                        <div class="flex-1">
                            <span class="text-gray mr-12px">待领取</span>
                            <span>9次</span>
                        </div>
                    </div>
                </div>
                <div class="border border-solid border-darkBorderColor rounded-8px p-16px mb-12px">
                    <div class="text-base mb-20px">电子签</div>
                    <div class="flex text-base">
                        <div class="flex-1">
                            <span class="text-gray mr-12px">已领份数</span>
                            <span>¥400</span>
                        </div>
                        <div class="flex-1">
                            <span class="text-gray mr-12px">剩余份数</span>
                            <span>3次</span>
                        </div>
                        <div class="flex-1">
                            <span class="text-gray mr-12px"></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="flex justify-end">
                <el-button class="text-base text-gray">取消</el-button>
                <el-button type="primary" class="text-base">确定</el-button>
            </div>
        </template>
    </customDrawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import customDrawer from '@/components/custom-drawer/index.vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: [Number, String],
        default: ''
    }
})

const emits = defineEmits(['update:show'])

const visible = ref(false)

const onCancle = () => {
    visible.value = false
}

watch(() => props.show, (newval) => {
    visible.value = newval
})

watch(visible, (newval) => {
    emits('update:show', newval)
})
</script>
<style lang="scss" scoped>
.member-bg {
    background: url('../../../assets/image/membership/memeber-bg.png') 
    no-repeat;
    background-size: 100% 100%;
}
</style>
